<template>
  <div id="containers" class="containers over-hide">
    <div id="output" class="containers login-bg">

      <el-row class="login-row" >
        <el-col :span="24" >
          <img src="../assets/logo.png" alt="说明" class="fl" style="width: 50px;height: 50px;">
        </el-col>
      </el-row>

      <el-row  class="clear login-main">
        <el-col :span="14" class="text-right box-module">
          <video style="margin-right: 20%;margin-top: 30px"  height="450px" autoplay muted loop >
            <source src="../assets/img/login-mp4.mp4"  >
            </video>
        </el-col>
        <el-col :span="10" class="form-module" >
          <!--<h4>电庄股份</h4>-->
          <h3>蓉约出行官网管理平台</h3>
          <el-form  :model="ruleForm2" :rules="rules2" class="demo-ruleForm login-container loadingtext">
            <h3 class="title">欢迎登陆</h3>
            <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark">{{error_meg}}</div></el-col>
            </el-row>
            <el-form-item prop="account" >
              <p>用户名</p>
              <el-input  v-model="ruleForm2.account"  placeholder="请输入账号" @change="error_meg=''"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <p>密码</p>
              <el-input v-model="ruleForm2.checkPass" type="password" placeholder="请输入密码" @change="error_meg=''" @keyup.enter.native="onLogin"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="24"><div class="nc-container password"><router-link to="/retrieve/password">找回密码</router-link></div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div id="your-dom-id" class="nc-container"></div>
              </el-col>
            </el-row>
            <el-form-item style="width:100%;">
              <el-button  @click.native.prevent="onLogin()" @keyup.enter="onLogin" style="width: 100%" type="primary">登录</el-button>
              <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
            </el-form-item>
          </el-form>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24" >
          <p class="login-bottom" >蜀ICP备10016620号-5 </p>
        </el-col>
      </el-row>
    </div>
  </div>



</template>
<script>
import { setToken } from '@/store/getters';
import { loginByUsername, aliyunVerification } from '@/api/login';
// const Login = { template: '#login' };
export default {
  data () {
    return {
      error_meg: '',
      ruleForm2: {
        account: '',
        checkPass: ''
      },
      loginProperties: {},
      sliderDisable: true,
      scene: 'nc_login',
      rules2: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        checkPass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    onLogin () {
      var _this = this;
      if (!_this.sliderDisable) {
        if (!_this.loginProperties || _this.loginProperties.value != 'pass') {
          _this.error_meg = '请向右滑动滑块进行验证';
          // return;
        } else {
          _this.error_meg = '';
          var ali = {
            sessionId: this.loginProperties.csessionid,
            sig: this.loginProperties.sig,
            token: this.loginProperties.token,
            scene: this.scene
          };
          aliyunVerification(ali).then(response => {
            if (response.code == 0 && response.data) {
              _this.loginNow();
            } else {
              _this.error_meg = response.message;
            }
            _this.login_nc();
          });
        }
      } else {
        _this.loginNow();
      }
    },
    loginNow () {
      var _this = this;
      loginByUsername(_this.ruleForm2.account, _this.ruleForm2.checkPass).then(
        response => {
          if (response.code !== 0) {
            var data = response.data;
            _this.error_meg = response.message;
            if (data.errorTime > 2) {
              _this.login_nc();
              _this.sliderDisable = false;
            }
          } else {
            setToken(response.data.authorization);
            _this.GLOBAL.token = response.data.authorization;
            const userId = response.data.userId;
            const username = response.data.userId;
            localStorage.setItem('username', username);
            localStorage.setItem('userId', userId);
            sessionStorage.setItem('member', JSON.stringify(response.data));
            _this.$router.push({
              path: '/home/welcome'
            });
          }
        }
      );
    },
    login_nc () {
      var _this = this;
      var ncToken = ['CF_APP_1', new Date().getTime(), Math.random()].join(
        ':'
      );
      var NCOpt = {
        renderTo: '#your-dom-id',
        appkey: 'FFFF0N000000000063FA',
        scene: 'nc_login',
        token: ncToken,
        customWidth: 260,
        trans: { key1: 'code0' },
        elementID: ['usernameID'],
        is_Opt: 0,
        language: 'cn',
        isEnabled: true,
        timeout: 3000,
        times: 5,
        apimap: {
          // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
          // 'get_captcha': '//b.com/get_captcha/ver3',
          // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
          // 'get_img': '//c.com/get_img',
          // 'checkcode': '//d.com/captcha/checkcode.jsonp',
          // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
          // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
          // 'umid_serUrl': 'https://g.com/service/um.json'
        },
        callback: function (data) {
          _this.loginProperties = data;
        }
      };
      var nc = new noCaptcha(NCOpt);
      nc.upLang('cn', {
        _startTEXT: '请按住滑块，拖动到最右边',
        _yesTEXT: '验证通过',
        _error300:
          '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
        _errorNetwork:
          '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>'
      });
    }
  },
  created: function () {

  }
};
</script>

